import React,{ Component } from 'react';
import {Footer} from '../Components';
import {createStore} from 'redux';
import {connect} from 'react-redux';
import mapStateToProps from '../value/mapStateToProps';
import {addToCart,addToCard,loginState,userLogin,changeUseName} from '../action/counter';
function objchangestring(obj){
	var arr=[];
	for(var i in obj){
		arr.push(i+'='+obj[i]);
	}
	return arr.join('&');
}
// var $ = (function(){
//     var ajax=function(url,callback,obj){
//          var xhr=new XMLHttpRequest();
//          xhr.open("POST",url,true);
//          if(obj){
//             var Obj=objchangestring(obj);
//             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//          xhr.send(Obj); 
//          }else{
//             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//             xhr.send('');   
//          }
//          xhr.onreadystatechange=function(){
//            if(xhr.readyState==4&&xhr.status==200){
//                  callback(JSON.parse(xhr.responseText));
//            }
//          }
//     }
//     return {
//       http:ajax    
//      }

//  })();
 class Detail extends React.Component{
    constructor(props) {
        super(props);


        this.props={
            src:{
                url:'http://10.31.160.25/product/list'
            }
        }

        
        this.state={
            page:{
                num:1,
            },
            data:{
                data:[1]
            },
            list:{
                data:[1]
            },
            pag:{
                num:1,
            }
            
       }
}
getdata(a){
    var arr=[];
    $.ajax({
        type: 'post',
        url:'http://10.31.160.25:3000/product/list',
        data:{...a}
    }).then(data=>{
        arr.push(data.rows)
        this.setState({
            data: Object.assign({}, this.state.data, {data:arr}),
        })   
});
}
comment(e){
   
  if(e.target.getAttribute('data-id')!=0&&e.target.getAttribute('data-id')!=null){
    console.log(e.target.getAttribute('data-id'));
    if(this.refs.regname.value!=null){
        console.log(this.props.match)
        $.ajax({
            type:"post",
            url:'http://10.31.160.25:3000/comment/data',
            data:{
                cateId:this.props.match.params.id,
                name:this.props.user.name,
                desc:this.refs.regname.value,
                title:this.props.match.params.title
            }
        }).then(res=>{
           this.getcommtlist({page:1})
           this.refs.regname.value=null;
        })
    }
  }else{
      alert('请登陆账号后评论')
  }
}
getcommtlist(a){
    a={...a, cateId:this.props.match.params.id}
    console.log(this.props.match.params.id)
    $.ajax({
        type:"post",
        url:'http://10.31.160.25:3000/comment/list',
        data:{ ...a }
    }).then(res=>{
        console.log(res.rows)
        this.setState({
            list: Object.assign({}, this.state.list, {data:[...res.rows]}),
        })
        console.log(this.state.list.data) 
    }) 
}
/*getdata(a){
var arr=[];
var that=this;
$.http('http://10.31.160.25:3000/product/list',function(data){
        console.log(data.rows)
        arr.push(data.rows)
    that.setState({
        data: Object.assign({}, that.state.data, {data:arr}),
    })   
},a);
}*/
    
    
    handl(e){
        var that=this;
        var ele=document.getElementsByClassName('pagination')[0].childNodes;
        var length=ele.length;
        for(var i=0;i<length;i++){
            ele[i].className=''
        };
        e.target.parentNode.className='active';
    that.setState({ 
        pag:Object.assign({},that.state.pag,{num:e.target.getAttribute('value')})
    });
    this.getcommtlist({page:e.target.getAttribute('value')})
    }
    componentWillMount(){  
        this.setState({
            list: {data:[1]},
        })
       console.log("this is will mount"); 
        this.getcommtlist({page:1})   
        this.getdata({page:this.props.match.params.page})
      // this.getdata({page:this.props.match.params.page})
      //  this.getcommtlist()
        }
        componentWillUpdate(){
             console.log('update')
           }
        componentDidUpdate(){
        }
    render(){
        var list=[];
        var output=[];
       
        var style={
            color:{
                color:"red"
            },
            height:"400px",
            mainForm:{
              width:"100%",
              border:"1px solid #ccc",    
              margin:"30px auto"
            },
            h3:{
              width:"100%",
              height:"50px",
              lineHeight:"50px",      
              backgroundColor:"#222",
              marginTop:"0px",
              paddingLeft:"20px",
              color:'white'
            },
            form :{
              padding:"30px 20px"
            }
        }
        
        for(var i=0;i<this.state.data.data[0].length;i++){
            //console.log(this.state.data.data[0][i]._id)
            //console.log(this.props.match.params.id)
           // console.log(this.props.match.params.page)
            if(this.state.data.data[0][i]._id===this.props.match.params.id){
                
                list.push(
                    <div className="row te">
                    <div className="col-sm-6 col-md-6">
                        <div className="thumbnail thum">
                        <img src={this.state.data.data[0][i].src} alt={this.state.data.data[0][i].title} style={style}/>
                        </div>
                    </div>
                    <div className="col-sm-6 col-md-6">
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <h3 style={{marginTop:'-45px'}}>{this.state.data.data[0][i].title}</h3>
                    <p style={{margin:'20px 0'}} ><strong>{this.state.data.data[0][i].desc}</strong></p>
                    <p style={{margin:'20px 0'}} ><strong>优惠</strong>： 包邮</p>
                    <p style={{margin:'20px 0'}} ><strong>发货地</strong> ：{this.state.data.data[0][i].address}</p>
                    <p style={{margin:'20px 0'}}><strong>配送至</strong> ：杭州</p>
                    <p style={{margin:'20px 0'}}><strong>重量</strong> ：600g</p>
                    <p style={{margin:'20px 0'}}><strong>点击量</strong> ：{this.state.data.data[0][i].hotclick}</p>
                    <br/>
                    <br/>
                    <br/>
                    <p  style={{marginTop:'-40px'}}>价格：<span style={{color:'red'}}>￥{this.state.data.data[0][i].price}</span></p>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <p  style={{marginTop:'-45px'}}><a href="javascript:;" className="btn btn-primary" role="button">加入购物车</a><a href="./#/Product" className="btn btn-default" role="button">返回</a></p>
                    </div>
                    </div>
                    
                )
            }
        }
      
              
            for(let i=0;i<this.state.list.data.length;i++){
                output.unshift(
                    <div className="col-sm-6 ">
                        <div className="thumbnail">
                        <div className="caption">
                            <p>用户： {this.state.list.data[i].name}</p>
                            <h3 >{this.state.list.data[i].desc}</h3>
                        </div>
                        </div>
                    </div>
                )
            }
        return(
            <div>
                
                {list} 
                <div className="container">      
                    <div className ="main-form" style={style.mainForm}>
                        <h3 style={style.h3}>评论</h3>
                        <form style={style.form}>
                       <div className="form-group">
                       <textarea ref="regname" className="form-control" style={{resize:" none"}}  id="exampleInputName1" placeholder="123456"></textarea>
                      {/*<Input type='textarea' className="form-control" ref="regcommt" rows="3" id="exampleInputPassword1"/>*/}
                       </div>    
                        <div className="form-group" style={{margin:"30px 0 0 150px",textAlign:"right"}} >
                            <button type="submit" className="btn btn-default" data-id={this.props.user.id} style={{marginRight:"30px"}} onClick={this.comment.bind(this)}>评论</button>
                           
                        </div>
                        </form>
                    </div>
                </div>
                <div className="row">
                    
                    {output}
                </div>
                <nav aria-label="..." className="text-center" onClick={this.handl.bind(this)}>
                    <ul className="pagination" >
                        <li className="disabled">
                            <span>
                            <span aria-hidden="true">&laquo;</span>
                            </span>
                        </li>
                        <li>
                        <span  value='1'>1 <span className="sr-only">(current)</span></span>
                        </li>
                        <li>
                        <span value='2'>2<span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='3'>3 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='4'>4 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='5'>5 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='6'>6 <span className="sr-only">(current)</span></span>
                        </li>
                        <li className="disabled">
                            <span>
                            <span aria-hidden="true">&raquo;</span>
                            </span>
                        </li>
                    </ul>
                </nav>
                 <div> <img width="100%" src='./img/6.png'/></div>
                <Footer/>
                
            </div>
            
        )
    }
}
export default connect(mapStateToProps,{addToCart,addToCard,loginState,userLogin,changeUseName})(Detail)